import React, {Component} from 'react';
import {movieList} from '../../api/movies';
import {message, Card, Table, Image, Tag} from 'antd';
import moment from "moment";
import {Link} from 'react-router-dom';

// 电影列表
export default class MovieList extends Component {

  state = {
    list: [],
    totalCount: 0,
    loading: false
  }
  initColumns = () => {
    this.columns = [
      {
        title: '电影名',
        dataIndex: 'movie_name',
        width: 100,
        render: (text, record) => <Link to={'/admin/movies/list/movie/' + record._id}>{text}</Link>
      },
      {
        title: '语言',
        width: 100,
        dataIndex: 'language',
        render: (text => !text ? '/' : text)
      },
      {
        title: '发布日期',
        width: 150,
        dataIndex: 'datePublished',
        render: (text => !text ? '/' : text),
        ellipsis: true,
      },
      {
        title: '发布地区',
        width: 150,
        dataIndex: 'region'
      },
      {
        title: '影片类型',
        dataIndex: 'genre',
        width: 150,
        render: (text => text.join('/'))
      },
      {
        title: '电影时长',
        width: 80,
        dataIndex: 'duration'
      },
      {
        title: '海报',
        dataIndex: 'image',
        width: 150,
        render: (text) => <Image src={text} width={80}/>
      },
      {
        title: '标签',
        dataIndex: 'tags',
        render: (text => text.map(item => <Tag key={item}>{item}</Tag>)),
        width: 100,
      },
      {
        title: '下载时间',
        dataIndex: 'downloadTime',
        width: 120,
        render: (text) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
        sorter: true, // 开启排序，参数为函数/true：后端排序
      },
      {
        title: '更新时间',
        dataIndex: 'updateTime',
        width: 120,
        render: (text) => moment(text).format('YYYY-MM-DD HH:MM:SS'),
        sorter: true,
      }
    ]
  }
  UNSAFE_componentWillMount() {
    this.initColumns();
  }

  getMovies = async (data={}) => {
    try {
      this.setState({loading: true});
      const {data: res} = await movieList(data);
      this.setState({
        list: res.items,
        totalCount: res.total_count,
        loading: false
      }, () => {
        this.scrollTop();
      })
    } catch (e) {
      this.setState({
        loading: false
      })
      message.error(e.data.name || e.data.message);
    }
  }

  // 滚动到顶部
  scrollTop = () => {
    const dom = document.querySelector('.ant-layout-content')
    const clock = setInterval(function () { // 滚动过渡
      if (dom.scrollTop !== 0) {
        dom.scrollTop -= 20;
      } else {
        clearInterval(clock);
      }
    }, 10);
  }

  onChange = (pagination, filters, sorter, extra) => {
    const {current, pageSize} = pagination;
    const field = sorter.field; // 排序的字段
    let order = sorter.order; // 排序的模式 asc升序 desc降序
    order = order !== undefined ? order.replace('end', '') : 'desc';
    this.getMovies({page: current, page_size: pageSize, sort: field, order,});
  }

  componentDidMount() {
    this.getMovies();
  }

  render() {
    const {list, totalCount, loading} = this.state;
    const pagination = {
      position: ['bottomCenter'],
      showQuickJumper: true,
      total: totalCount,
    }
    return (
      <Card title='电影列表' >
        <Table columns={this.columns}
               loading={loading}
               dataSource={list}
               rowKey='_id'
               scroll={{x: 800}}
               onChange={this.onChange}
               pagination={pagination}
        />
      </Card>
    )
  }
}
